<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="/common/common.jsp" %>
    <link rel="stylesheet" href="${basePath}/plugins/ztree/zTreeStyle/zTreeStyle.css${VERSION}" type="text/css">
</head>
<body>
<div class="org">
    <div class="widget-header header-color-blue2">
        <h4 class="lighter smaller"> &nbsp;请选择部门</h4>
    </div>
    <div class="org-body">
        <div class="widget-main padding-8">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
    <!-- /.col -->
</div>
<div class="right">
    <ul class="info">
        <li>
            <ul class="list">
                [ <a id="expandAllBtn" href="#" onclick="return false;">全部展开</a> ]
                [ <a id="asyncAllBtn" href="#" onclick="return false;">后台自动全部加载</a> ]
                [ <a id="resetBtn" href="#" onclick="return false;">Reset zTree</a> ]
            </ul>
        </li>
    </ul>
</div>
</div>
<!-- /.main-container -->
<script src="${basePath}/plugins/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript">
    <!--
    var demoMsg = {
        async: "正在进行异步加载，请等一会儿再点击...",
        expandAllOver: "全部展开完毕",
        asyncAllOver: "后台异步加载完毕",
        asyncAll: "已经异步加载完毕，不再重新加载",
        expandAll: "已经异步加载完毕，使用 expandAll 方法"
    }
    var setting = {
        async: {
            enable: true,
            url: "${basePath}/org/getOrgTree",
            autoParam: ["id=parentId"],
            otherParam: {"otherParam": "zTreeAsyncTest"},
            dataFilter: filter,
            dataType: "json",
            type: "get"
        },
        callback: {
            beforeAsync: beforeAsync,
            onAsyncSuccess: onAsyncSuccess,
            onAsyncError: onAsyncError,
            onClick: onClick
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        var data = childNodes.data;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            data[i].name = data[i].name.replace(/\.n/g, '.');
        }
        return data;
    }

    function beforeAsync() {
        curAsyncCount++;
    }

    function onAsyncSuccess(event, treeId, treeNode, msg) {
        curAsyncCount--;
        if (curStatus == "expand") {
            expandNodes(treeNode.children);
        } else if (curStatus == "async") {
            asyncNodes(treeNode.children);
        }

        if (curAsyncCount <= 0) {
            if (curStatus != "init" && curStatus != "") {
                $("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
                asyncForAll = true;
            }
            curStatus = "";
        }
    }

    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        curAsyncCount--;

        if (curAsyncCount <= 0) {
            curStatus = "";
            if (treeNode != null) asyncForAll = true;
        }
    }

    var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
            goAsync = false;
    function expandAll() {
        if (!check()) {
            return;
        }
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        if (asyncForAll) {
            $("#demoMsg").text(demoMsg.expandAll);
            zTree.expandAll(true);
        } else {
            expandNodes(zTree.getNodes());
            if (!goAsync) {
                $("#demoMsg").text(demoMsg.expandAll);
                curStatus = "";
            }
        }
    }
    function expandNodes(nodes) {
        if (!nodes) return;
        curStatus = "expand";
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        for (var i = 0, l = nodes.length; i < l; i++) {
            zTree.expandNode(nodes[i], true, false, false);
            if (nodes[i].isParent && nodes[i].zAsync) {
                expandNodes(nodes[i].children);
            } else {
                goAsync = true;
            }
        }
    }

    function asyncAll() {
        if (!check()) {
            return;
        }
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        if (asyncForAll) {
            $("#demoMsg").text(demoMsg.asyncAll);
        } else {
            asyncNodes(zTree.getNodes());
            if (!goAsync) {
                $("#demoMsg").text(demoMsg.asyncAll);
                curStatus = "";
            }
        }
    }
    function asyncNodes(nodes) {
        if (!nodes) return;
        curStatus = "async";
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        for (var i = 0, l = nodes.length; i < l; i++) {
            if (nodes[i].isParent && nodes[i].zAsync) {
                asyncNodes(nodes[i].children);
            } else {
                goAsync = true;
                zTree.reAsyncChildNodes(nodes[i], "refresh", true);
            }
        }
    }

    function reset() {
        if (!check()) {
            return;
        }
        asyncForAll = false;
        goAsync = false;
        $("#demoMsg").text("");
        $.fn.zTree.init($("#treeDemo"), setting);
    }

    function check() {
        if (curAsyncCount > 0) {
            $("#demoMsg").text(demoMsg.async);
            return false;
        }
        return true;
    }

    var orgName;
    var orgId;
    function onClick(event, treeId, treeNode, clickFlag) {
        orgName = treeNode.name;
        orgId = treeNode.id;

    }

    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting);
        $("#expandAllBtn").bind("click", expandAll);
        $("#asyncAllBtn").bind("click", asyncAll);
        $("#resetBtn").bind("click", reset);
    });
    //-->
</script>
</body>
</html>